<template>
    <div id="Distributors">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="nickname"
          label="分销商姓名">
          <template slot-scope="scope">
            <div style="display: flex">
              <div style="border-radius: 50%; overflow: hidden">
                <img style="border-radius: 50%;" width="40px" height="40px" :src="scope.row.avatar | handleImgSize" alt="">
              </div>
              <div  style="position: relative; flex: 1; padding-left: 10px">
                <span  style="display: block; position: absolute; top: 50%; transform: translateY(-50%)">
                  {{scope.row.nickname}}
                  <i v-if="scope.row.fullname">（{{scope.row.fullname}}）</i>
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="类别"
        >
          <template slot-scope="scope">
            {{scope.row.level | handleType}}
          </template>
        </el-table-column>
        <!--<el-table-column-->
          <!--label="消费订单"-->
        <!--&gt;-->
        <!--</el-table-column>-->
        <!--<el-table-column-->
          <!--label="消费金额"-->
        <!--&gt;-->
        <!--</el-table-column>-->
        <el-table-column
          prop="createtime"
          label="注册时间"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :page-count="pageInfo.pageCount"
        :page-size="pageInfo.pageSize"
        :current-page="pageInfo.currentPage"
        @current-change="loadTableData($event)"
      >
      </el-pagination>
    </div>
</template>

<script>
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
export default {
  name: 'Distributors',
  props: ['tabConfig'],
  mounted () {
    this.$nextTick(() => {
      this.initPage()
    })
  },
  data () {
    return {
      tableData: null,
      pageInfo: {
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      }
    }
  },
  beforeRouteEnter (to, from, next) {
  },
  watch: {},
  filters: {
    handleType: value => {
      switch (value) {
        case 1:
          return '一级'
        case 2:
          return '二级'
      }
    },
    handleImgSize: (value) => {
      return `${value}?imageView2/1/w/40/h/40`
    }
  },
  methods: {
    initPage () { // 初始化
      this.loadTableData()
    },
    async loadTableData (page = 1) { // 加载数据
      this.tabConfig.loading = true
      const { id } = this.$route.params
      const response = await API.getDistributor({ accountId: id, page })
      this.tabConfig.loading = false
      const { code, data } = response
      if (code === 1) {
        const { pageCount, pageIndex, pageSize, rows } = data
        this.tableData = rows
        this.pageInfo.pageCount = pageCount || 1
        this.pageInfo.pageSize = pageSize
        this.pageInfo.currentPage = pageIndex
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
</style>
